<template>
  <view class="hot-video-container">
    <!-- 1. 导入 mescroll-body -->
    <!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"> -->
      <block v-for="(item, index) in videoList" :key="index">
        <hot-video-item :data="item" @click="onItemClick" />
      </block>
    <!-- </mescroll-body> -->
  </view>
</template>

<script>
// 2. 导入 mixin
//import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { getHotVideoList } from '@/api/info/video.js';
import { mapMutations } from 'vuex';
export default {
  // 3. 注册 mixin
  //mixins: [MescrollMixin],
  data() {
    return {
      // 数据源
      videoList: [],
      size: 10,
      page: 1,
      // 是否为 init
      isInit: true,
      // 实例
      mescroll: null
    };
  },
  created() {
    this.loadHotVideoList();
  },
  mounted() {
    //this.mescroll = this.$refs.mescrollRef.mescroll;
  },
  methods: {
    ...mapMutations('video', ['setVideoData']),
    /**
     * 获取列表数据
     */
    async loadHotVideoList() {
      //const { data: res } = await getHotVideoList({ page: this.page, size: this.size });
      // 判断是否为第一页数据
      if (this.page === 1) {
        this.videoList = [
            {
                "id": "18408451153501335722",
                "title": "趣味科普：还记得小时候的蜡笔吗？因为用它乱画挨了不少训",
                "poster_small": "https://f7.baidu.com/it/u=1521809107,47638895&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_big": "https://f7.baidu.com/it/u=1521809107,47638895&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_pc": "https://f7.baidu.com/it/u=1521809107,47638895&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "source_name": "杨羊羊趣说",
                "play_url": "http://vd4.bdstatic.com/mda-nh923xsapckm3efv/cae_h264/1660099906707828616/mda-nh923xsapckm3efv.mp4?v_from_s=hkapp-haokan-suzhou",
                "duration": "00:59",
                "url": "https://haokan.hao123.com/v?vid=18408451153501335722&pd=pc&context=",
                "show_tag": 0,
                "publish_time": "1天前",
                "is_pay_column": 0,
                "like": "8",
                "comment": "4",
                "playcnt": "1122",
                "fmplaycnt": "1122次播放",
                "fmplaycnt_2": "1122",
                "outstand_tag": "",
                "previewUrlHttp": "https://vd4.bdstatic.com/mda-nh923xsapckm3efv/cae_h264/1660099906707828616/mda-nh923xsapckm3efv.mp4?v_from_s=hkapp-haokan-suzhou&auth_key=1660271992-0-0-d0d9ae5209eab90f85f8cbac9e49edfc&bcevod_channel=searchbox_feed&pd=1&vt=1&cd=0&watermark=0&did=&logid=0592186151&vid=18408451153501335722&pt=0&appver=&model=&cr=0&abtest=100-101-102-103-104-120-121-122-peav_l52&sle=1&sl=810&split=692639",
                "third_id": "1738407551490971",
                "vip": 0,
                "author_avatar": "https://pic.rmb.bdstatic.com/bjh/user/f7049cbc7f1f8013a39b454c02ffd0f5.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=196"
            },
            {
                "id": "10276906967318016486",
                "title": "关羽伤心了，就差一丝血就守住家了",
                "poster_small": "https://f7.baidu.com/it/u=1560994043,3897693245&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_big": "https://f7.baidu.com/it/u=1560994043,3897693245&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_pc": "https://f7.baidu.com/it/u=1560994043,3897693245&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "source_name": "小姨游戏讲解",
                "play_url": "http://vd2.bdstatic.com/mda-nh98jf9a5ivz45qk/360p/h264/1660111419044257696/mda-nh98jf9a5ivz45qk.mp4?v_from_s=hkapp-haokan-suzhou",
                "duration": "01:18",
                "url": "https://haokan.hao123.com/v?vid=10276906967318016486&pd=pc&context=",
                "show_tag": 0,
                "publish_time": "1天前",
                "is_pay_column": 0,
                "like": "11",
                "comment": "0",
                "playcnt": "757",
                "fmplaycnt": "757次播放",
                "fmplaycnt_2": "757",
                "outstand_tag": "",
                "previewUrlHttp": "https://vd2.bdstatic.com/mda-nh98jf9a5ivz45qk/360p/h264/1660111419044257696/mda-nh98jf9a5ivz45qk.mp4?v_from_s=hkapp-haokan-suzhou&auth_key=1660271992-0-0-0e379b534213686788b13324eb88d11a&bcevod_channel=searchbox_feed&pd=1&vt=1&cd=0&watermark=0&did=&logid=0592186151&vid=10276906967318016486&pt=0&appver=&model=&cr=0&abtest=100-101-102-103-104-120-121-122-peav_l52&sle=1&sl=1267&split=1075931",
                "third_id": "1738922256083988",
                "vip": 0,
                "author_avatar": "https://pic.rmb.bdstatic.com/bjh/user/1b0e96f00b1b82a64891d8839c695371.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=229"
            },
            {
                "id": "3949586891825109480",
                "title": "全球通用的求救手势",
                "poster_small": "https://f7.baidu.com/it/u=443807738,876962102&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_big": "https://f7.baidu.com/it/u=443807738,876962102&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_pc": "https://f7.baidu.com/it/u=443807738,876962102&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "source_name": "花花科普",
                "play_url": "http://vd2.bdstatic.com/mda-nh94q38c60t61q7s/cae_h264/1660103019496881310/mda-nh94q38c60t61q7s.mp4?v_from_s=hkapp-haokan-suzhou",
                "duration": "00:23",
                "url": "https://haokan.hao123.com/v?vid=3949586891825109480&pd=pc&context=",
                "show_tag": 0,
                "publish_time": "1天前",
                "is_pay_column": 0,
                "like": "16",
                "comment": "0",
                "playcnt": "972",
                "fmplaycnt": "972次播放",
                "fmplaycnt_2": "972",
                "outstand_tag": "",
                "previewUrlHttp": "https://vd2.bdstatic.com/mda-nh94q38c60t61q7s/cae_h264/1660103019496881310/mda-nh94q38c60t61q7s.mp4?v_from_s=hkapp-haokan-suzhou&auth_key=1660271992-0-0-01225b4482038944ea77f4c56be5c09a&bcevod_channel=searchbox_feed&pd=1&vt=1&cd=0&watermark=0&did=&logid=0592186151&vid=3949586891825109480&pt=0&appver=&model=&cr=0&abtest=100-101-102-103-104-120-121-122-peav_l52&sle=1&sl=515&split=434380",
                "third_id": "1731946211977268",
                "vip": 0,
                "author_avatar": "https://pic.rmb.bdstatic.com/bjh/user/f1bec0aa5563c00a35887e79390cecff.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=205"
            },
            {
                "id": "13516576779620539588",
                "title": "保时捷电动方向机那不叫减配，选配后不给叫明抢。特斯拉",
                "poster_small": "https://f7.baidu.com/it/u=37076342,1468667996&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_big": "https://f7.baidu.com/it/u=37076342,1468667996&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_pc": "https://f7.baidu.com/it/u=37076342,1468667996&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "source_name": "魏宇同学魏斯拉",
                "play_url": "http://vd4.bdstatic.com/mda-nh949zq3pn00h7zw/cae_h264/1660101190542634696/mda-nh949zq3pn00h7zw.mp4?v_from_s=hkapp-haokan-suzhou",
                "duration": "00:35",
                "url": "https://haokan.hao123.com/v?vid=13516576779620539588&pd=pc&context=",
                "show_tag": 0,
                "publish_time": "1天前",
                "is_pay_column": 0,
                "like": "10",
                "comment": "0",
                "playcnt": "3937",
                "fmplaycnt": "3937次播放",
                "fmplaycnt_2": "3937",
                "outstand_tag": "",
                "previewUrlHttp": "https://vd4.bdstatic.com/mda-nh949zq3pn00h7zw/cae_h264/1660101190542634696/mda-nh949zq3pn00h7zw.mp4?v_from_s=hkapp-haokan-suzhou&auth_key=1660271992-0-0-28f2a054ede07ef15cace381f19fd061&bcevod_channel=searchbox_feed&pd=1&vt=1&cd=0&watermark=0&did=&logid=0592186151&vid=13516576779620539588&pt=0&appver=&model=&cr=0&abtest=100-101-102-103-104-120-121-122-peav_l52&sle=1&sl=827&split=695572",
                "third_id": "1740120612232239",
                "vip": 0,
                "author_avatar": "https://pic.rmb.bdstatic.com/bjh/user/a2114b68847ab5df05f59d6ee68dea8a.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=180"
            },
            {
                "id": "3663768164605121841",
                "title": "「沙雕动画」咪妈（下集）",
                "poster_small": "https://pic.rmb.bdstatic.com/bjh/video/75632e73b0f70c2d364e2bf653a53cb4.jpeg@s_0,w_660,h_370,q_80",
                "poster_big": "https://pic.rmb.bdstatic.com/bjh/video/75632e73b0f70c2d364e2bf653a53cb4.jpeg@s_0,w_660,h_370,q_80",
                "poster_pc": "https://pic.rmb.bdstatic.com/bjh/video/75632e73b0f70c2d364e2bf653a53cb4.jpeg@s_0,w_660,h_370,q_80,f_webp",
                "source_name": "冠军雕",
                "play_url": "http://vd3.bdstatic.com/mda-nh9cvvvu4f5gqp8h/cae_h264/1660123732236111663/mda-nh9cvvvu4f5gqp8h.mp4?v_from_s=hkapp-haokan-suzhou",
                "duration": "04:39",
                "url": "https://haokan.hao123.com/v?vid=3663768164605121841&pd=pc&context=",
                "show_tag": 0,
                "publish_time": "1天前",
                "is_pay_column": 0,
                "like": "238",
                "comment": "20",
                "playcnt": "5131",
                "fmplaycnt": "5131次播放",
                "fmplaycnt_2": "5131",
                "outstand_tag": "",
                "previewUrlHttp": "https://vd3.bdstatic.com/mda-nh9cvvvu4f5gqp8h/cae_h264/1660123732236111663/mda-nh9cvvvu4f5gqp8h.mp4?v_from_s=hkapp-haokan-suzhou&auth_key=1660271992-0-0-d3cf02b73eb931982d211008b71800c4&bcevod_channel=searchbox_feed&pd=1&vt=1&cd=0&watermark=0&did=&logid=0592186151&vid=3663768164605121841&pt=0&appver=&model=&cr=0&abtest=100-101-102-103-104-120-121-122-peav_l52&sle=1&sl=246&split=333164",
                "third_id": "1709977901507712",
                "vip": 3,
                "author_avatar": "https://pic.rmb.bdstatic.com/bjh/user/9b33bc697f81a0e07f2ec227423fdd54.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=119"
            },
            {
                "id": "264972307626144707",
                "title": "我的世界：你建我猜，303建了什么？",
                "poster_small": "https://f7.baidu.com/it/u=2270414708,365482704&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_big": "https://f7.baidu.com/it/u=2270414708,365482704&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_pc": "https://f7.baidu.com/it/u=2270414708,365482704&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "source_name": "魔王Him",
                "play_url": "http://vd3.bdstatic.com/mda-nh9c7h9vefp25dux/cae_h264/1660121029617203110/mda-nh9c7h9vefp25dux.mp4?v_from_s=hkapp-haokan-suzhou",
                "duration": "01:00",
                "url": "https://haokan.hao123.com/v?vid=264972307626144707&pd=pc&context=",
                "show_tag": 0,
                "publish_time": "1天前",
                "is_pay_column": 0,
                "like": "497",
                "comment": "35",
                "playcnt": "10901",
                "fmplaycnt": "1.1万次播放",
                "fmplaycnt_2": "1.1万",
                "outstand_tag": "",
                "previewUrlHttp": "https://vd3.bdstatic.com/mda-nh9c7h9vefp25dux/cae_h264/1660121029617203110/mda-nh9c7h9vefp25dux.mp4?v_from_s=hkapp-haokan-suzhou&auth_key=1660271992-0-0-079e099f677513499f4a7c5f23116e80&bcevod_channel=searchbox_feed&pd=1&vt=1&cd=0&watermark=0&did=&logid=0592186151&vid=264972307626144707&pt=0&appver=&model=&cr=0&abtest=100-101-102-103-104-120-121-122-peav_l52&sle=1&sl=455&split=402432",
                "third_id": "1663183810682338",
                "vip": 1,
                "author_avatar": "https://pic.rmb.bdstatic.com/bjh/user/4da089ef2f8d3e6b8105a4cf2044d2b6.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=107"
            },
            {
                "id": "18103342792878211107",
                "title": "极限随机合成22终极之家已完成，做出无尽胸甲",
                "poster_small": "https://f7.baidu.com/it/u=3945553327,1343369286&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_big": "https://f7.baidu.com/it/u=3945553327,1343369286&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_pc": "https://f7.baidu.com/it/u=3945553327,1343369286&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "source_name": "我的世界叶枫DD",
                "play_url": "http://vd3.bdstatic.com/mda-nh8q2wudej7mwv00/cae_h264/1660117017676233843/mda-nh8q2wudej7mwv00.mp4?v_from_s=hkapp-haokan-suzhou",
                "duration": "01:34",
                "url": "https://haokan.hao123.com/v?vid=18103342792878211107&pd=pc&context=",
                "show_tag": 0,
                "publish_time": "1天前",
                "is_pay_column": 0,
                "like": "784",
                "comment": "42",
                "playcnt": "14507",
                "fmplaycnt": "1.5万次播放",
                "fmplaycnt_2": "1.5万",
                "outstand_tag": "",
                "previewUrlHttp": "https://vd3.bdstatic.com/mda-nh8q2wudej7mwv00/cae_h264/1660117017676233843/mda-nh8q2wudej7mwv00.mp4?v_from_s=hkapp-haokan-suzhou&auth_key=1660271992-0-0-d109f1a5618b04fa7963f1fb4ae44b3b&bcevod_channel=searchbox_feed&pd=1&vt=1&cd=0&watermark=0&did=&logid=0592186151&vid=18103342792878211107&pt=0&appver=&model=&cr=0&abtest=100-101-102-103-104-120-121-122-peav_l52&sle=1&sl=477&split=436600",
                "third_id": "1697440409771371",
                "vip": 1,
                "author_avatar": "https://pic.rmb.bdstatic.com/bjh/user/b35e8ba811dc581272c3309041ee5871.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=236"
            },
            {
                "id": "10170034156090511586",
                "title": "小冉在机场发生紧急情况，急的她到处跑怕回不了家，太粗心大意了",
                "poster_small": "https://f7.baidu.com/it/u=609392841,3733534363&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_big": "https://f7.baidu.com/it/u=609392841,3733534363&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "poster_pc": "https://f7.baidu.com/it/u=609392841,3733534363&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80",
                "source_name": "付小冉",
                "play_url": "http://vd2.bdstatic.com/mda-nh9cse1zsvp5923v/cae_h264/1660122705671737938/mda-nh9cse1zsvp5923v.mp4?v_from_s=hkapp-haokan-suzhou",
                "duration": "03:33",
                "url": "https://haokan.hao123.com/v?vid=10170034156090511586&pd=pc&context=",
                "show_tag": 0,
                "publish_time": "1天前",
                "is_pay_column": 0,
                "like": "135",
                "comment": "23",
                "playcnt": "9677",
                "fmplaycnt": "9677次播放",
                "fmplaycnt_2": "9677",
                "outstand_tag": "",
                "previewUrlHttp": "https://vd2.bdstatic.com/mda-nh9cse1zsvp5923v/cae_h264/1660122705671737938/mda-nh9cse1zsvp5923v.mp4?v_from_s=hkapp-haokan-suzhou&auth_key=1660271992-0-0-b7bd2d028846720ccc7ef1cf11ca104d&bcevod_channel=searchbox_feed&pd=1&vt=1&cd=0&watermark=0&did=&logid=0592186151&vid=10170034156090511586&pt=0&appver=&model=&cr=0&abtest=100-101-102-103-104-120-121-122-peav_l52&sle=1&sl=585&split=577108",
                "third_id": "1666483924526310",
                "vip": 0,
                "author_avatar": "https://pic.rmb.bdstatic.com/9c2c16d1dc3b14b4ff7afd1db9023926.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=46"
            }
        ]
		//res.list;
      } else {
        this.videoList = [...this.videoList, ...res.list];
      }
    },
    // 4. 实现回调方法
    /**
     * List 组件的首次加载
     */
    async mescrollInit() {
      await this.loadHotVideoList();
      this.isInit = false;
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess();
    },
    /**
     * 下拉刷新的回调
     */
    async downCallback() {
      if (this.isInit) return;
      this.page = 1;
      await this.loadHotVideoList();
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess();
    },
    /**
     * 上拉加载的回调
     */
    async upCallback() {
      if (this.isInit) return;
      this.page += 1;
      await this.loadHotVideoList();
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess();
    },
    /**
     * item 点击事件
     */
    onItemClick(data) {
      // 保存当前点击的 video 数据到 vuex
      this.setVideoData(data);
      // 进行页面跳转
      uni.navigateTo({
        url: `/pages/package/work/video/video-detail/video-detail`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.hot-video-container {
  background-color: $uni-bg-color-grey;
}
</style>
